<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="80px" @keyup.enter.native="enterSearch">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port :name="portName" v-model="choicePortCode" :isMultiple = "true"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态">
                        <el-select v-model="choiceStatusCode" multiple placeholder="请选择" clearable>
                            <el-option v-for="item in statusList" :key="item.key" :label="item.value" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名">
                        <el-input v-model="condition['search_LIKE_shipName']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="航次">
                        <el-input v-model="condition['search_LIKE_voyage']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建日期">
                        <date-slot :startDate.sync="condition.search_GTE_createDateTime"
                                   :endDate.sync="condition.search_LTE_createDateTime"></date-slot>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成人">
                        <!--<el-input v-model="condition['search_LIKE_closeUser']"></el-input>-->
                        <el-select v-model="personOtherVal" filterable placeholder="请选择" @focus="getClerkAndOther(personOtherVal)" @change="getClerkAndOther(personOtherVal)" clearable>
                            <el-option
                                v-for="item in otherOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="完成日期">
                        <date-slot :startDate.sync="condition.search_GTE_taskTime"
                                   :endDate.sync="condition.search_LTE_taskTime"></date-slot>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航日期">
                        <date-slot :startDate.sync="condition.search_GTE_closeTime"
                                   :endDate.sync="condition.search_LTE_closeTime"></date-slot>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="拆提封航">
                        <date-slot :startDate.sync="condition.search_GTE_feeCloseTime"
                                   :endDate.sync="condition.search_LTE_feeCloseTime"></date-slot>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-button type="primary" class="ml-80" @click="loadData">查 询</el-button>
                    <!--<el-button @click="handleFormOpen(true)">新 增</el-button>-->
                    <el-button @click="handleExport">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="mt-10 ">
            <el-col :span="20" style="display: flex;justify-content: space-between">
                <title-point color="#30C8CA">
                    <div slot="content">
                        未作业箱 :
                        <span style="font-size: 16px">{{ noJobteu }} TEU</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        已作业箱 :
                        <span style="font-size: 16px">{{ jobTeu }} TEU</span></div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        未作业 :
                        <span style="font-size: 16px">{{ noWork }} 艘</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        作业中 :
                        <span style="font-size: 16px">{{ working }} 艘</span></div>
                </title-point>
                <title-point color="#50B155">
                    <div slot="content">
                        理箱完成 :
                        <span style="font-size: 16px">{{ worked }} 艘</span></div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        外理封航 :
                        <span style="font-size: 16px">{{ close }}  艘</span>
                    </div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="plan" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <div class="plan-expand" v-pd="true">
                        <div class="load-flex" style="width: 500px">
                            <span>内贸,空</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.IE.planNum"
                                        :noNum="scope.row.shipPlanDetails.IE.noWork"
                                        :num="scope.row.shipPlanDetails.IE.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.IE.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.IE.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.IE.planNum }} TEU</span>
                        </div>
                        <div class="load-flex" style="width: 500px">
                            <span>内贸,重</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.IF.planNum"
                                        :noNum="scope.row.shipPlanDetails.IF.noWork"
                                        :num="scope.row.shipPlanDetails.IF.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.IF.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.IF.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.IF.planNum }} TEU</span>
                        </div>
                        <div class="load-flex" style="width: 500px">
                            <span>外贸,空</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.OE.planNum"
                                        :noNum="scope.row.shipPlanDetails.OE.noWork"
                                        :num="scope.row.shipPlanDetails.OE.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.OE.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.OE.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.OE.planNum }} TEU</span>
                        </div>
                        <div class="load-flex" style="width: 500px">
                            <span>外贸,重</span>
                            <z-progress :width="150" class="mr-10" color="#409EFE"
                                        :total="scope.row.shipPlanDetails.OF.planNum"
                                        :noNum="scope.row.shipPlanDetails.OF.noWork"
                                        :num="scope.row.shipPlanDetails.OF.worked"></z-progress>
                            <span>作 {{ scope.row.shipPlanDetails.OF.worked }} TEU</span>
                            <span>未 {{ scope.row.shipPlanDetails.OF.noWork }} TEU</span>
                            <span>总 {{ scope.row.shipPlanDetails.OF.planNum }} TEU</span>
                        </div>

                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="shipPlanNo" label="计划编号"  min-width="120" sortable>
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleReport(scope.row)">{{ scope.row.shipPlanNo }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column sortable prop="shipName" label="船名"  min-width="120"></el-table-column>
            <el-table-column sortable prop="voyage" label="航次"  min-width="80"></el-table-column>
            <el-table-column sortable prop="portName" label="作业港口" min-width="110"></el-table-column>
            <!--<el-table-column prop="planType" label="计划类型"  min-width="110">-->
            <!--<template slot-scope="scope">-->
            <!--{{ scope.row.planType | _filterShipPlanType }}-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column sortable prop="isPortClose" label="港口封航" min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.isPortClose | _filterTrueOrFalse }}
                </template>
            </el-table-column>
            <el-table-column sortable prop="planStatus" label="作业状态"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.planStatus | _filterShipPlanStatus }}
                </template>
            </el-table-column>
            <el-table-column sortable prop="taskTime" label="完成日期"  min-width="140">
                <template slot-scope="scope">
                    {{ scope.row.taskTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column sortable prop="closeTime" label="封航日期"  min-width="140">
                <template slot-scope="scope">
                    {{ scope.row.closeTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column sortable prop="feeCloseTime" label="拆提封航日期"  min-width="160">
                <template slot-scope="scope">
                    {{ scope.row.feeCloseTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column sortable prop="tallyNum" label="理货量TEU"  min-width="140"></el-table-column>
            <el-table-column sortable prop="devanPassNum" label="拆提放行TEU"  min-width="140"></el-table-column>
            <el-table-column sortable prop="planFrom" label="数据来源" min-width="110"></el-table-column>
            <el-table-column sortable prop="createDateTime" label="创建时间"  min-width="160"></el-table-column>
            <el-table-column fixed="right" align="center" label="操作"  width="140">
                <template slot-scope="scope">
                    <el-button size="small" v-if="power('TALLY_WORK_UNLOADPLAN:UPD')"
                               type="text" @click="handleFormOpen(false,scope.row)">编辑
                    </el-button>
                    <el-dropdown style="margin-left:10px">
                            <span class="el-dropdown-link">
                                <el-button size="small" type="text">更多
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-button type="text" class="danger" size="small"
                                           v-if="power('TALLY_WORK_UNLOADPLAN:DEL')"
                                           @click="handleRemove(scope.row.shipPlanNo)">删除
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="small" v-if="power('TALLY_WORK_UNLOADPLAN:REP')"
                                           type="text" @click="handleReport(scope.row)">理箱报告
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="small" v-if="power('TALLY_WORK_UNLOADPLAN:CLOSE')"
                                           :disabled="scope.row.planStatus!=='ONE'&&scope.row.planStatus!=='FOUR'"
                                           type="text" @click="handleClose(scope.row)">卸船封航
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="small" v-if="power('TALLY_WORK_UNLOADPLAN:FEECLOSE')"
                                           type="text" :disabled="scope.row.planStatus!=='FIVE'"
                                           @click="handleFeeClose(scope.row)">拆提封航
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="small" type="text" @click="cancelIceound(scope.row)"
                                           v-if="power('TALLY_WORK_UPLOADPLAN:CANCELCLOSE')"
                                           :disabled="scope.row.planStatus!=='FIVE'">
                                    取消卸船封航
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="small" type="text" @click="lifeSeal(scope.row)"
                                           :disabled="scope.row.planStatus!=='SIX'"
                                           v-if="power('TALLY_WORK_UNLOADPLAN:CANCELFEECLOSE')">
                                    取消拆提封航
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="small" type="text" @click="mustFinish(scope.row)"
                                           :disabled="scope.row.planStatus!=='TWO'&&scope.row.planStatus!=='ONE'&&scope.row.planStatus!=='THREE'">
                                    强制理箱完成
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="请确定最后理货人" :visible.sync="showDialog" width="450px" top="30vh">
            <div align="center" style="margin-top: 10px">
                <el-select v-model="personVal" filterable placeholder="请选择" style="width: 70%" @focus="getClerk(personVal)" @change="getClerk(personVal)">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="forceFinish">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getShipPlan, deleteShipPlan, cancelIceound, lifeSeal, getTallyClerk, forceOption } from "@/api/shipPlan/shipPlan";
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import dateSlot from '@/components/date/dateSlot'
    import zProgress from '@/components/progress/z-progress'
    import titlePoint from '../common/title-point'
    import selectPort from '@/components/select/selectPort'
    import { newExportExcel } from "@/utils/newExport";
    import { shipPlanType, trueOrFalse, shipPlanStatus, portCode } from "../../../assets/dict";

    export default {
        name: "卸船计划列表",
        components: {
            autoSearchPortStation, dateSlot, zProgress, titlePoint, selectPort
        },
        data() {
            return {
                condition: {
                    search_EQ_portCode: '',
                    search_EQ_planStatus: '',
                    search_LIKE_shipName: '',
                    search_LIKE_voyage: '',
                    search_GTE_createDateTime: '',
                    search_LTE_createDateTime: '',
                    search_GTE_closeTime:'',
                    search_LTE_closeTime:'',
                    search_LIKE_taskUser:''
                },
                plan: [],
                noWork: 0,
                working: 0,
                worked: 0,
                close: 0,
                jobTeu: 0,
                noJobteu: 0,
                created: true,
                portName: '',
                showDialog: false,
                region:'',
                options: [],
                personVal: '',
                planID: '',
                choicePeopleCode:'',
                choicePortCode:[],
                choiceStatusCode : [],
                otherOptions : [],
                personOtherVal:'',
                statusList : [
                    {key : 'ONE', value : '未作业'},
                    {key : 'TWO', value : '作业中'},
                    {key : 'THREE', value : '退回作业'},
                    {key : 'FOUR', value : '理箱完成'},
                    {key : 'FIVE', value : '外理封航'},
                    {key : 'SIX', value : '拆提封航'}
                ]
            }
        },
        directives: {
            pd: {
                inserted(el, binding) {
                    if (binding.value) {
                        el.parentNode.style.padding = '10px 50px'
                    }
                },
                update(el, binding) {
                    if (binding.value) {
                        el.parentNode.style.padding = '10px 50px'
                    }
                },
            }
        },
        mounted() {

            const condition = JSON.parse(sessionStorage.getItem('ctIndex'))
            this.condition = {
                ...condition
            }
            if (window.localStorage.cdStatus === "理箱完成") {
                this.$set(this.condition, 'search_EQ_planStatus', 'FOUR')
                this.choiceStatusCode.push('FOUR')
            } else {
                this.$set(this.condition, 'search_EQ_planStatus', '')
                const SHIP_DATE = sessionStorage.getItem('SHIP_DATE')
                this.portName = this.condition.search_EQ_portCode
                this.choicePortCode = this.condition.search_EQ_portCode
                if (SHIP_DATE) {
                    this.$set(this.condition, 'search_GTE_createDateTime', SHIP_DATE + ' 00:00:00')
                    this.$set(this.condition, 'search_LTE_createDateTime', SHIP_DATE + ' 23:59:59')
                    // this.condition['search_GTE_createDateTime'] = SHIP_DATE + ' 00:00:00'
                    // this.condition['search_LTE_createDateTime'] = SHIP_DATE + ' 23:59:59'
                }
            }
            this.condition['search_EQ_portCode'] = ""
            this.loadData()
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        methods: {
            loadData() {
                if(typeof this.choicePortCode  === 'string'){
                    this.condition.search_IN_portCode = this.choicePortCode
                } else {
                    this.condition.search_IN_portCode = this.arrayToString(this.choicePortCode)
                }
                // this.condition.search_IN_portCode = this.arrayToString(this.choicePortCode)
                this.condition.search_IN_planStatus = this.arrayToString(this.choiceStatusCode)
                if (this.personOtherVal != '' && this.personOtherVal != null){
                    this.condition.search_LIKE_taskUser = this.personOtherVal
                }
                let params = this.$assist.copySearchConditions(this.condition)
                params.search_EQ_planType = 'XC'
                params.sortType = '-createDateTime'
                params.iDisplayLength = 65535
                getShipPlan(params).then(res => {
                    this.created = false
                    this.plan = res.data.aaData
                    this.jobTeu = res.data.jobTeu
                    this.noJobteu = res.data.noJobteu
                    this.noWork = 0
                    this.working = 0
                    this.worked = 0
                    this.close = 0
                    this.plan.forEach(f => {
                        if (f.planStatus === 'ONE') {
                            this.noWork = this.noWork + 1
                        }
                        if (f.planStatus === 'TWO') {
                            this.working = this.working + 1
                        }
                        if (f.planStatus === 'FOUR') {
                            this.worked = this.worked + 1
                        }
                        if (f.planStatus === 'FIVE') {
                            this.close = this.close + 1
                        }
                    })
                })
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            enterSearch() {
                this.loadData()
            },
            getClerkAndOther(val){
                let params = {
                    search_LIKE_personName: val
                }
                getTallyClerk(params).then(res=>{
                    let dts = res.data.aaData
                    dts.forEach(el =>{
                        el.value = el.id
                        el.label = el.personName
                    })
                    this.otherOptions = dts
                })
            },
            handleFormOpen(bool, item = {}) {
                if (bool) {
                    const name = '创建卸船计划'
                    const isHas = this.$store.state.tagsView.cachedViewsName.includes(name)
                    if (isHas) {
                        this.$store.dispatch('delVisitedViews', view).then((views) => {
                            this.$router.push({ path: '/work/shipPlan/unloadAdd', name: name })
                        })
                    } else {
                        this.$router.push({ path: '/work/shipPlan/unloadAdd', name: name })
                    }
                } else {
                    sessionStorage.setItem('unloadId', item.shipPlanNo)
                    this.$router.push({ path: '/work/shipPlan/unloadEdit', name: '编辑卸船计划' })
                }
            },
            handleRemove(id) {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteShipPlan(id).then(res => {
                        this.$message({ message: '删除成功!', type: 'success' })
                        this.loadData()
                    })
                })
            },

            //取消外理封航
            cancelIceound(item) {

                this.$confirm('确认取消外理封航?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = item.shipPlanNo;
                    cancelIceound(data).then(res => {
                        this.$message({
                            message: '取消封航成功!',
                            type: 'success'
                        })
                        this.loadData()
                    })
                })

            },
            //取消拆提封航
            lifeSeal(item) {

                this.$confirm('确认取消拆提封航?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = item.shipPlanNo;
                    lifeSeal(data).then(res => {
                        this.$message({
                            message: '取消拆提封航成功!',
                            type: 'success'
                        })
                        this.loadData()
                    })
                })


            },

            handleReport(item) {
                sessionStorage.setItem('unReportId', item.shipPlanNo)
                sessionStorage.removeItem('ContainerId')
                this.$router.push({ path: '/work/shipPlan/unReport', name: '卸船理箱报告' })
            },
            handleClose(item) {
                sessionStorage.setItem('closeId', item.shipPlanNo)
                this.$router.push({ path: '/work/shipPlan/close', name: '外理封航' })
            },
            handleFeeClose(item) {
                sessionStorage.setItem('feeId', item.shipPlanNo)
                this.$router.push({ path: '/work/shipPlan/fee', name: '拆提封航' })
            },
            handleExport() {
                let map = new Map();
                map.set("shipPlanNo", "计划编号");
                map.set("shipName", "船名");
                map.set("voyage", "航次");
                map.set("portName", "作业港口");
                map.set("planType", "计划类型");
                map.set("isPortClose", "港口封航");
                map.set("planStatus", "作业状态");
                map.set("taskTime", "完成日期");
                map.set("closeTime", "封航日期");
                map.set("planFrom", "数据来源");
                map.set("createDateTime", "创建时间");
                map.set("IE", "内贸空");
                map.set("IF", "内贸重");
                map.set("OE", "外贸空");
                map.set("OF", "外贸重");
                map.set("total", "合计");
                if(typeof this.choicePortCode  === 'string'){
                    this.condition.search_IN_portCode = this.choicePortCode
                } else {
                    this.condition.search_IN_portCode = this.arrayToString(this.choicePortCode)
                }
                // this.condition.search_IN_portCode = this.arrayToString(this.choicePortCode)
                this.condition.search_IN_planStatus = this.arrayToString(this.choiceStatusCode)
                if (this.personOtherVal != '' && this.personOtherVal != null){
                    this.condition.search_LIKE_taskUser = this.personOtherVal
                }
                let params = this.$assist.copySearchConditions(this.condition)
                params.search_EQ_planType = 'XC'
                params.sortType = '-createDateTime'
                params.iDisplayLength = 65535
                getShipPlan(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "planType") {
                                record[key] = shipPlanType.get(record[key]);
                            }
                            if (key === "isPortClose") {
                                record[key] = trueOrFalse.get(record[key]);
                            }
                            if (key === "planStatus") {
                                record[key] = shipPlanStatus.get(record[key]);
                            }
                            if (key === "IE") {
                                record[key] = record.shipPlanDetails.IE.worked
                            }
                            if (key === "IF")  {
                                record[key] = record.shipPlanDetails.IF.worked
                            }
                            if (key === "OE") {
                                record[key] = record.shipPlanDetails.OE.worked
                            }
                            if (key === "OF") {
                                record[key] = record.shipPlanDetails.OF.worked
                            }
                            if (key === "total") {
                                record[key] = record.shipPlanDetails.IE.worked+record.shipPlanDetails.IF.worked+record.shipPlanDetails.OE.worked+record.shipPlanDetails.OF.worked
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("卸船计划", exportRecords);
                })
            },
            mustFinish(row){
                this.showDialog = true
                this.personVal = ''
                this.planID = row.shipPlanNo
                this.choicePeopleCode = row.portCode
            },
            getClerk(val){
                let params = {
                    search_LIKE_resourceName: val,
                    search_EQ_portCode: this.choicePeopleCode
                }
                getTallyClerk(params).then(res=>{
                    let dts = res.data.aaData
                    dts.forEach(el =>{
                        el.value = el.id
                        el.label = el.personName
                    })
                    this.options = dts
                })
            },
            forceFinish(){
                let params = {
                    tallyUserId: this.personVal
                }
                forceOption(this.planID,params).then(res =>{
                    this.showDialog = false
                    this.loadData()
                })
            }
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        }
    }
</script>

<style scoped>
    .load-flex {
        display: flex;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .plan-expand {
        width: 1020px;
        margin-left: 20px;
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .plan-expand span {
        margin-right: 10px;
    }
</style>
